{% extends 'backend/home.html' %}
{% load static %}
{% block Primary %}
    <div class="section rounded mb-3">

        <div class="d-flex align-items-center justify-content-between border-bottom pb-4 my-2">

            <div class="w-100">
                <h2 class="h5 mb-0">Visits &amp; Orders</h2>
                <small class="small text-muted">Monthly revenue of 2022</small>
            </div>

            <!-- save image -->
            <a href="#" data-chartjs-id="visitsvsorders" data-file-name="visitsvsorders"
               class="chartjs-save btn btn-sm btn-light text-primary-hover rounded-circle float-end m-0"
               data-bs-toggle="tooltip" title="Save Chart" aria-label="Save Chart">
                <i class="fi fi-arrow-download m-0"></i>
            </a>

        </div>

        <div class="row g-4">

            <div class="col-12 col-lg-7 col-xl-9">

                <div class="position-relative h-100" style="min-height:250px; max-height:500px">
                    <canvas id="visitsvsorders" class="chartjs"
                            data-chartjs-dots="false"
                            data-chartjs-legend="false"
                            data-chartjs-grid="true"
                            data-chartjs-tooltip="true"

                            data-chartjs-title=""
                            data-chartjs-xaxes-label=""
                            data-chartjs-yaxes-label=""
                            data-chartjs-line-width="5"

                            data-chartjs-type="line"
                            data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
                            data-chartjs-datasets='[{
                      "label": "Visits",
                      "data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
                      "fill": true,
                      "backgroundColor": "rgba(255, 206, 86, 0.2)"
                    },{
                      "label": "Orders",
                      "data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
                      "fill": true,
                      "backgroundColor": "rgba(255, 206, 86, 0.4)"
                    }]'></canvas>

                </div>

            </div>

            <div class="col-12 col-lg-5 col-xl-3">

                <!-- card -->
                <div class="bg-white shadow-lg p-4 rounded my-3 transition-hover-top transition-all-ease-150">

                    <!-- dropdown options -->
                    <div class="float-end dropdown">
                        <button type="button" class="dropdown-toggle btn btn-sm btn-light px-2 py-1 mt-n1"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                aria-label="options">
                      <span>
                        <svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                             class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                          <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
                        </svg>
                      </span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-clean">
                            <a href="#" class="dropdown-item">Export PDF</a>
                            <a href="#" class="dropdown-item">Export Tasks</a>
                            <a href="#" class="dropdown-item">Print</a>
                        </div>
                    </div>
                    <!-- /dropdown options -->

                    <div class="avatar-group mb-3"><!-- avatars -->
                        <div class="avatar avatar-xs avatar-border rounded-circle"
                             style="background-image:url(../../html_frontend/demo.files/images/avatar/jessica_barden.jpg)"></div>
                        <div class="avatar avatar-xs avatar-border rounded-circle"
                             style="background-image:url(../../html_frontend/demo.files/images/avatar/jadson_dantas.jpg)"></div>
                        <div class="avatar avatar-xs avatar-border rounded-circle"
                             style="background-image:url(../../html_frontend/demo.files/images/avatar/tasmin_egerton.jpg)"></div>
                        <div class="avatar avatar-xs avatar-border rounded-circle bg-primary text-white">
                            <i>2+</i>
                        </div>
                    </div>

                    <a href="#" class="d-block h6 text-dark">Project Ikarus</a>
                    <p class="small">This project has a timeline, we need to finish it as soon as possible!</p>

                    <!-- progress -->
                    <span class="small">39%</span>
                    <div class="progress" style="height:3px">
                        <div class="progress-bar bg-danger" role="progressbar" aria-label="progressbar"
                             style="width: 39%" aria-valuenow="39" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                </div>

                <!-- card -->
                <div class="bg-white shadow-lg p-4 rounded my-3 transition-hover-top transition-all-ease-150">

                    <!-- dropdown options -->
                    <div class="float-end dropdown">
                        <button type="button" class="dropdown-toggle btn btn-sm btn-light px-2 py-1 mt-n1"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                aria-label="options">
                      <span>
                        <svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                             class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                          <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
                        </svg>
                      </span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-clean">
                            <a href="#" class="dropdown-item">Export PDF</a>
                            <a href="#" class="dropdown-item">Export Tasks</a>
                            <a href="#" class="dropdown-item">Print</a>
                        </div>
                    </div>
                    <!-- /dropdown options -->

                    <div class="avatar-group mb-3"><!-- avatars -->
                        <div class="avatar avatar-xs avatar-border rounded-circle"
                             style="background-image:url(../../html_frontend/demo.files/images/avatar/jadson_dantas.jpg)"></div>
                        <div class="avatar avatar-xs avatar-border rounded-circle"
                             style="background-image:url(../../html_frontend/demo.files/images/avatar/tasmin_egerton.jpg)"></div>
                    </div>

                    <a href="#" class="d-block h6 text-dark">Remarketing</a>
                    <p class="small">Our client needs remarketing for his two projects!</p>

                    <!-- progress -->
                    <span class="small">78%</span>
                    <div class="progress" style="height:3px">
                        <div class="progress-bar bg-warning" role="progressbar" aria-label="progressbar"
                             style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                </div>

                <div class="clearfix bg-light p-1 row-pill">
                    <a href="#"
                       class="btn btn-pill btn-sm btn-warning py-1 mb-0 float-start transition-hover-end"
                       title="Detailed Revenue" aria-label="Detailed Revenue">View</a>
                    <span class="d-block pt-1 px-2 text-muted text-truncate">
                    view all projects
                  </span>
                </div>

            </div>

        </div>

    </div>
{% endblock %}

